<template>
	<el-container>
		<el-aside width="220px">
			<el-tree ref="category"
					 class="menu"
					 node-key="label"
					 :data="category"
					 :highlight-current="true"
					 @node-click="handleNodeClick"
					 :default-expand-all="true">
				<template #default="scope">
					<el-badge :value="scope.data.total" class="item" type="info">
						<span class="custom-tree-node" style="width: 100%;">
							{{ scope.data.label }}
						</span>
					</el-badge>
				</template>
			</el-tree>
			<el-tree ref="emailBox" class="menu" node-key="boxId" :data="boxList" :props="groupsProps" :current-node-key="''"
					 :highlight-current="true" :expand-on-click-node="false" :default-expand-all="true"
					 :filter-node-method="groupFilterNode" @node-click="groupClick">
				<template #default="{node, data}">
					<el-badge :value="data.total" class="item" type="info">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
								<span class="do" v-if="data.boxId!='0'">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="emailBoxEdit(data)"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="emailBoxDel(node, data)"></el-button>
									</el-button-group>
								</span>
							</span>
					</el-badge>
				</template>
			</el-tree>


			<el-button type="primary" icon="el-icon-plus" @click="createBox" style="width: 100%;">创建文件夹</el-button>
		</el-aside>
		<component :ref="groupId" :is="isComponent" @changefoldersuccess="updateDate"/>
	</el-container>
	<emailbox v-if="dialog.save" ref="saveDialog" @updateemailbox="handleSaveSuccess" @closed="dialog.save=false"></emailbox>
</template>

<script>
import recebox from './recebox'
import starbox from './starbox'
import sendbox from './sendbox'
import draftbox from './draftbox'
import deletebox from './deletebox'
import emailbox from "./emailbox"
import myboxemail from "./myboxemail"
import webemail from "./webemail"
export default {
	name: 'Email',
	components: {
		emailbox,
		recebox,
		starbox,
		sendbox,
		draftbox,
		deletebox,
		myboxemail,
		webemail
	},
	data() {
		return {
			infoDrawer: false,
			groupId: this.$route.query.groupId==undefined?"recebox":this.$route.query.groupId,
			isComponent:this.$route.query.groupId==undefined?"recebox":this.$route.query.groupId,
			dialog: {
				save: false
			},
			boxList: [],
			groupsProps: {
				label: "boxName",
				value: "boxId"
			},
			category: [
				{
					label: '我的邮件',
					children: [
						{value: '0', label: '收件箱', icon: 'sc-icon-inbox',total:0},
						{value: '1', label: '标星邮件', icon: 'sc-icon-star',total:0},
						{value: '2', label: '发件箱', icon: 'sc-icon-sendbox',total:0},
						{value: '3', label: '草稿箱', icon: 'sc-icon-draft',total:0},
						{value: '4', label: '回收站', icon: 'el-icon-delete',total:0},
						{value: '5', label: 'Web邮件', icon: 'sc-icon-inbox'},
					]
				}
			],
			date: [],
		}
	},
	mounted() {
		this.getEmailCount();
		this.getEmailBoxList();
	},
	methods: {

		//加载树数据
		async getEmailBoxList() {
			this.showGrouploading = true;
			var res = await this.$API.email.getEmailBoxList.get();
			this.showGrouploading = false;
			this.boxList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			if(data.boxId!='0')
			{
				this.groupId="myboxemail";
				this.isComponent="myboxemail"
				this.$nextTick(() => {
					this.$refs.myboxemail.initBoxId(data.boxId)
				})
			}
		},
		emailBoxEdit(data) {
			this.dialog.save = true
			this.$nextTick(() => {
				var editNode = this.$refs.emailBox.getNode(data.boxId);
				var editNodeParentId = editNode.level == 1 ? '0' : editNode.parent.data.boxId;
				data.parentId = editNodeParentId
				this.$refs.saveDialog.open("edit").setData(data)
			})

		},
		emailBoxDel(node, data) {
			this.$confirm(`确定删除 ${data.boxName} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				var res = await this.$API.email.deleteEmailBox.post({boxId: data.boxId});
				if (res.code == 200) {
					this.$refs.emailBox.remove(data.boxId)
					this.$message.success("操作成功")
					this.updateDate();
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}

			}).catch(() => {

			})
		},
		async getEmailCount()
		{
			var res = await this.$API.email.getEmailCount.get();
			if (res.code == 200) {
				this.category[0].children[0].total=res.data.boxCount;
				this.category[0].children[1].total=res.data.starCount;
				this.category[0].children[2].total=res.data.sendCount;
				this.category[0].children[3].total=res.data.draftCount;
				this.category[0].children[4].total=res.data.delCount;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		handleNodeClick(node) {
			if(node.value==0)
			{
				this.groupId = "recebox";
				this.isComponent = "recebox";
			}else if(node.value=="1")
			{
				this.groupId = "starbox";
				this.isComponent = "starbox";
			}else if(node.value=="2")
			{
				this.groupId = "sendbox";
				this.isComponent = "sendbox";
			}else if(node.value=="3")
			{
				this.groupId="draftbox";
				this.isComponent="draftbox"
			}else if(node.value=="4")
			{
				this.groupId="deletebox";
				this.isComponent="deletebox"
			}else if(node.value=="5")
			{
				this.groupId="webemail";
				this.isComponent="webemail"
			}

		},
		updateDate(){
			this.getEmailCount();
			this.getEmailBoxList();
		},
		handleSaveSuccess() {
			this.getEmailBoxList();
		},
		createBox(){
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		}
	}
}
</script>

<style>
.menu{
	font-size: 14px;
}
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
